<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>RSim Control Interface</title>
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="nsim.js"></script>
    <style type="text/css">
	  body { background-color: #333; margin: 0px; padding: 0px; color: #ccc; }
	  table { border-collapse: collapse; margin-bottom: 5px; width: 100%; }
	  h1 { font-size: 14pt; background-color: #444; margin-top: 0px; color: #ccc; padding: 5px; border-bottom: 1px solid #555;}
	  h2 { font-size: 12pt; margin-top: 20px; margin-bottom: 5px; color: #ccc; padding: 1px; }
	  td, th, div { font-size: 10pt; color: #eee; }
	  td, th { border: none; }
      td.label { width: 5%; text-align: right; }
      td.value { width: 95%; text-align: left; padding-left: 10px; }
      td.value input { float: left; background-color: #444; }
      td.text input { width: 500px; border: 1px solid #555; color: #ccc; }
      td.cb input { width: 10px; }
      div { margin: 5px;}
	  div.col-info, div.col-console { width: 100%; }
	  div.col-console { width: 90%; }
	  textarea#console { width: 90%; border: 1px solid #555; background-color: #444; color: #ccc; height: auto; resize: none; line-height: 24px; overflow: hidden; }
	  .console-output-item { border-bottom: 1px solid #666; }
      .console-output-cmd { white-space: pre; font-family: monospace; font-size: 8pt; }
      .console-output-result { white-space: pre; font-family: monospace; font-size: 8pt; }
	</style>
  </head>

<body>
	<h1>NSim Control Interface</h1>

	<div class="col-info">
		<h2>Information</h2>
		<table>
			<tr><td class="label">Version:</td><td class="value" id="info-version"></td></tr>
			<tr><td class="label">Modules:</td><td class="value" id="info-modules"></td></tr>
			<tr><td class="label">Rpc url:</td><td class="value text"><input type="text" id="rpc-url" /></td></tr>
			<tr><td class="label">Indent JSON output:</td><td class="value cb"><input type="checkbox" id="console-indent-output" checked="yes" /></td></tr>
			<tr><td class="label">Last update:</td><td class="value" id="info-last-update"></td></tr>
		</table>

		<!--
		<div>
			<button id="update">Update</button>
			<button id="realtime">Realtime</button>
		</div>
		-->
	</div>

	<div class="col-console">
		<h2>Console</h2>
		<form>
			<textarea id="console" rows="1" autocorrect="off" spellcheck="false" autofocus="" ></textarea>
		</form>
		<div id="console-output"></div>
	</div>

</body>

</html>
